<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



<!-- 文档地址 https://getbootstrap.net/docs/components/navs/ -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
	</li>
</ul>


<!-- 内容区域 -->
<div class="tab-content" id="myTabContent">
	
	<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" style="height: 100vh;background-color: #666">
		第一

	</div>


	<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" style="height: 100vh;background-color: #666">
		第二

	</div>


	<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" style="height: 100vh;background-color: #666">
		第三

	</div>
</div>

<script type="text/javascript">
	var navitem=$('.nav-item');
	navitem.click(function(){
		console.log($(this).index());
	});
</script>
